<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
        <title>
            阳光成单系统
        </title>
       
        <link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
         <script src="../../js/layui/layui.js"></script>

</head>
    <body>
    <!-- 修改表单 -->
            <form class="layui-form" style="display: none;" id="updateForm" lay-filter="updateForm">
              <input type="hidden" name="t_id">
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label"><span class="x-red">*</span>分类名</label>
                    <div class="layui-input-inline">
                        <input type="text"  name="t_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
			<input type="hidden" id="picName" name="t_img" required="" lay-verify="required" lay-reqtext="图片不能为空"/>
			<img id="imgUrl" name="imgUrl" width="200px" height="200px"/>
			<button type="button" class="layui-btn" id="test1">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>

			<div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button  class="layui-btn" lay-filter="update" lay-submit=""> 保存</button>
                </div>
            </form>
    
    <!-- 添加表单 -->
     <div class="x-body">
            <form class="layui-form" style="display: none;" id="addForm" >
              
                <div class="layui-form-item">
                    <label for="cname" class="layui-form-label"><span class="x-red">*</span>分类名</label>
                    <div class="layui-input-inline">
                        <input type="text"  name="t_name" required="" lay-verify="required"
                        autocomplete="off" class="layui-input">
                    </div>
                </div>
			<input type="hidden" id="picName2"   lay-reqtext="图片不能为空"/>
			<img id="imgUrl2" name="imgUrl2" width="200px" height="200px"/>
			<button type="button" class="layui-btn" id="test2">
				<i class="layui-icon">&#xe67c;</i>上传图片
			</button>

			<div class="layui-form-item">
                    <label for="L_repass" class="layui-form-label"></label>
                    <button  class="layui-btn" lay-filter="add" lay-submit=""> 保存</button>
                </div>
            </form>
        </div>
    
    
    <!-- 多条件分页查询 -->
        <div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>会员管理</cite></a>
              <a><cite>分类管理</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
        </div>
        <div class="x-body">
            <form class="layui-form x-center" action="" style="width:100%">
                <div class="layui-form-pane" style="margin-top: 15px;">
                  <div class="layui-form-item">
                    <label class="layui-form-label" style="width:120px">分类名称：</label>
                    <div class="layui-input-inline" style="width:120px">
                        <input type="text" id="t_name"  placeholder="分类名" autocomplete="off" class="layui-input">
                    </div>
                     <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="chaxun"><i>&#xe608;</i>查询</button>
                    </div>
                    <div class="layui-input-inline" style="width:80px">
                        <button class="layui-btn"  lay-submit="" lay-filter="addBtn" ><i class="layui-icon">&#xe608;</i>增加</button>
                    </div>
                  </div>
                </div> 
            </form>
            <xblock><button class="layui-btn layui-btn-danger" onclick="delAll()"><i class="layui-icon">&#xe640;</i>批量删除</button><span class="x-right" style="line-height:40px">共有数据：88 条</span></xblock>
            
            <!-- 数据表格 -->
            <table id="demo" lay-filter="test"></table>
            
        </div>
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script src="./js/x-layui.js" charset="utf-8"></script>
	<script>
            layui.use(['layer','form','table','upload'], function(){
             var   $ = layui.$,//jquery
              layer = layui.layer,//弹出层
              form = layui.form,
			  table = layui.table,
			  upload = layui.upload;
              
              table.render({
            	    elem: '#demo'
            	    ,url: '../../productTypeAll' //数据接口
            	    ,id:'idTest'
            	    ,page: true //开启分页
            	    ,cols: [[ //表头
            	    	{checkbox: true, fixed: true}
            	     , {field: 't_id', width:50,title: 'ID',sort: true, fixed: 'left'}
            	      ,{field: 't_name',width:100, title: '类别名称'}
            	      ,{field: 't_img', width:90,title: '图片',templet:'<div><img src="images/{{d.t_img}}"  /></div>'}
            	      ,{fixed: 'right', width:150, align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
            	       ]]
            	  });
              //动态获取下拉框数据
              $.post("../../productTypeType",{},function(res){
            	  for (var i = 0; i < res.length; i++) {
					$(".getType").append(`<option value="${res[i].t_id}">${res[i].t_name}</option>`)					
				}
            	  form.render("select");
              },"json");
              //图片上传
              upload.render({
				elem : '#test1', //绑定元素
				url : '../../Upload', //上传接口
				done : function(res) {
					//上传完毕回调
					layer.msg(res.msg);
					$("#picName").val(res.data);
					$("#imgUrl").attr("src","images/"+res.data); 
				},
				error : function() {
					//请求异常回调
				},
				
              });
              upload.render({
  				elem : '#test2', //绑定元素
  				url : '../../Upload', //上传接口
  				done : function(res) {
  					//上传完毕回调
  					layer.msg(res.msg);
  					$("#picName2").val(res.data);
  					$("#imgUrl2").attr("src","images/"+res.data); 
  				},
  				error : function() {
  					//请求异常回调
  				}
  			});
            //工具条事件
              table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）

             	if(layEvent === 'del'){ //删除
             		layer.confirm('确定?', {icon: 3, title:'确定要删除吗？'}, function(index){
           			  //do something
           			  $.post("../../productTypeDelete",{t_id:data.t_id},function(res){
               		if (res.code=="0") {
  						layer.closeAll();
  						layer.msg('删除成功', {icon: 1});
  						table.reload("idTest");
  					} else {
  						layer.msg('删除失败', {icon: 2});
  					}
               	},"json");
           	});
                } else if(layEvent === 'edit'){ //编辑
                	form.val("updateForm",data);
                	layer.open({
                		type:1,
                		content:$("#updateForm")
                	})
                } 
              });
              //监听查询
              form.on('submit(chaxun)', function(data){
            	  table.reload('idTest', {
            		  url: '../../productTypeAll'
            		  ,where: {
            			  t_id:$("#t_id").val(),
            			  t_name:$("#t_name").val()
            		  } //设定异步数据接口的额外参数
            		  //,height: 300
            		});
                return false;
              });
				//修改
				form.on('submit(update)', function(data){
            	  $.post("../../productTypeUpdate",$("#updateForm").serialize(),function(res){
            		  if (res.code=="0") {
						layer.closeAll();
						layer.msg('修改成功', {icon: 1});
						table.reload("idTest");
					} else {
						layer.msg('修改失败', {icon: 2});
					}
            	  },"json")
                return false;
              });
				
              //添加
              form.on('submit(addBtn)', function(data){
            	  layer.open({
            		  type:1,
            		  content:$("#addForm")
            	  })
                return false;
              });
              form.on('submit(add)', function(data){
            	  $.post("../../productTypeAdd",$("#addForm").serialize(),function(res){
            		  if (res.code=="0") {
						layer.closeAll();
						layer.msg('添加成功', {icon: 1});
						table.reload("idTest");
					} else {
						layer.msg('添加失败', {icon: 2});
					}
            	  },"json")
                return false;
              });
              
            //批量删除提交
              function delAll () {
                 layer.confirm('确认要删除吗？',function(index){
                     //捉到所有被选中的，发异步进行删除
                     layer.msg('删除成功', {icon: 1});
                 });
              }
			
            
        
              //-编辑
            })
        
	</script>
  <script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
  </script>          
    </body>
</html>